<template>
    <div class="content">
        <div class="area" ref="area"></div>
        <div class="industry" ref="industry"></div>
        <!-- <div class="industry" ref="industry"></div> -->
        <div class="mostgongsi" ref="most"></div>
        <div class="lessgongsi" ref="less"></div>
        <div class="total" ref="total"></div>
        <div class="zhuzhuangtu" ref="zhuzhuang"></div>
    </div>
</template>

<script>
/* eslint-disable */
export default {
    methods:{
        drawArea(){
            // 基于准备好的dom，初始化echarts实例
            let area_dom = this.$refs.area;
            if(area_dom){
            // 绘制图表
                let area_Chart = this.$echarts.init(area_dom);
                area_Chart.setOption({
                    title: { text: '僵尸企业地区分布' },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        top: 20,
                        left: 10,
                        data: ['广东', '山东', '广西', '江西', '福建', '湖北', '湖南']
                    },
                    series: [
                        {
                            name: '僵尸企业地区比例',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: 1261, name: '广东'},
                                {value: 1275, name: '山东'},
                                {value: 1298, name: '广西'},
                                {value: 1311, name: '江西'},
                                {value: 1240, name: '湖北'},
                                {value: 1268, name: '湖南'},
                                {value: 1293, name: '福建'}
                            ]
                        }
                    ]
                });
            }
        },
        drawIndustry () {
            let industry_dom = this.$refs.industry;
            if(industry_dom){
            // 绘制图表
                let industry_Chart = this.$echarts.init(industry_dom);
                industry_Chart.setOption({
                    title: { text: '僵尸企业行业分布' },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        top: 20,
                        left: 10,
                        data: ['服务业', '工业', '交通运输业', '零售业', '商业服务业', '社区服务', 'NA']
                    },
                    series: [
                        {
                            name: '僵尸企业行业比例',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: 0.1635, name: '服务业'},
                                {value: 0.1662, name: '工业'},
                                {value: 0.1764, name: '交通运输业'},
                                {value: 0.1615, name: '零售业'},
                                {value: 0.1632, name: '商业服务业'},
                                {value: 0.1605, name: '社区服务'},
                                {value: 0.0086, name: 'NA'}
                            ]
                        }
                    ]
                });
            }
        },
        drawMost () {
            let most_dom = this.$refs.most;
            if(most_dom){
            // 绘制图表
                let industry_Chart = this.$echarts.init(most_dom);
                industry_Chart.setOption({
                    title: { text: '僵尸企业比例最高的五个行业' },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        top: 20,
                        left: 10,
                        data: ['钢铁', '房地产', '建筑装饰', '商业贸易', '综合类']
                    },
                    series: [
                        {
                            name: '僵尸企业行业比例',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: 0.5143, name: '钢铁'},
                                {value: 0.4453, name: '房地产'},
                                {value: 0.3176, name: '建筑装饰'},
                                {value: 0.2889, name: '商业贸易'},
                                {value: 0.2195, name: '综合类'}
                            ]
                        }
                    ]
                });
            }
        },
        drawLess () {
            let less_dom = this.$refs.less;
            if(less_dom){
            // 绘制图表
                let industry_Chart = this.$echarts.init(less_dom);
                industry_Chart.setOption({
                    title: { text: '僵尸企业比例最低的五个行业' },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        top: 20,
                        left: 10,
                        data: ['银行', '传媒', '非银金融', '计算机', '休闲服务']
                    },
                    series: [
                        {
                            name: '僵尸企业行业比例',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: 0, name: '银行'},
                                {value: 0.412, name: '传媒'},
                                {value: 0.0465, name: '非银金融'},
                                {value: 0.0523, name: '计算机'},
                                {value: 0.0588, name: '休闲服务'}
                            ]
                        }
                    ]
                });
            }
        },
        drawTotal () {
            let total_dom = this.$refs.total;
            if(total_dom){
            // 绘制图表
                let industry_Chart = this.$echarts.init(total_dom);
                industry_Chart.setOption({
                    title: {
                        text: '僵尸企业雷达图'
                    },
                    tooltip: {},
                    legend: {
                        data: ['僵尸企业', '非僵尸企业']
                    },
                    radar: {
                        // shape: 'circle',
                        name: {
                            textStyle: {
                                color: '#fff',
                                backgroundColor: '#999',
                                borderRadius: 3,
                                padding: [3, 5]
                            }
                        },
                        indicator: [
                            { name: '偿债能力', max: 2},
                            { name: '成长能力', max: 2},
                            { name: '盈利能力', max: .5},
                            { name: '成长能力', max: 2},
                            { name: '平均融资难度', max: 20},
                            { name: '融资依赖程度', max: 1.5},
                        ]
                    },
                    series: [{
                        name: '僵尸企业 vs 非僵尸企业',
                        type: 'radar',
                        // areaStyle: {normal: {}},
                        data: [
                            {
                                value: [1.14524773, 1.820265951, 0, 1.820265951,17.68323544,1.2],
                                name: '僵尸企业'
                            },
                            {
                                value: [1.15526863, 1.821846928, 0.385261, 1.821846928,17.70449425,0.269391803],
                                name: '非僵尸企业'
                            }
                        ]
                    }]
                });
            }
        },
        drawZhuzhuang(){
            let zhuzhuang_dom = this.$refs.zhuzhuang;
            if(zhuzhuang_dom){
            // 绘制图表
                let industry_Chart = this.$echarts.init(zhuzhuang_dom);
                industry_Chart.setOption({
                    title: {
                    subtext: '僵尸企业数据'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#283b56'
                            }
                        }
                    },
                    legend: {
                        data:['僵尸企业比例', '僵尸企业数量']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: {readOnly: false},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    dataZoom: {
                        show: false,
                        start: 0,
                        end: 100
                    },
                    xAxis: [
                            {
                                type: 'category',
                                boundaryGap: true,
                                data: (function () {
                                    var res = [];
                                    for(let i=0;i<14;i++){
                                        res.push(i+2000);
                                    }
                                    return res;
                                })()
                            },
                            {
                                type: 'category',
                                boundaryGap: true,
                                data: [50,50,50,50,50,50,50,50,50]
                            }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            scale: true,
                            max: 50000,
                            min: 0,
                            boundaryGap: [.5, 1]
                        },
                        {
                            type: 'value',
                            scale: true,
                            name: '僵尸企业比例',
                            max: 50000,
                            min: 0,
                            data: [1,23,4],
                            boundaryGap: ['0.2, 0.2']
                        }
                    ],
                    series: [
                        {
                            name: '僵尸企业数量',
                            type: 'bar',
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            data: [44000,37000,35000,29000,23500,24000,29000,28000,26000,26500,16000,17000,27000]
                        },
                        {
                            name: '僵尸企业比例',
                            type: 'line',
                            data: [.3,.2,.18,.15,.12,.13,.16,.15,.138,.138,.08,.09,.14]
                        }
                    ]
                });
            }
        }
    },
    mounted () {
        this.drawArea()
        this.drawIndustry()
        this.drawMost()
        this.drawLess()
        this.drawTotal()
        this.drawZhuzhuang()
    }
}
</script>

<style lang="stylus" scoped>
    .content{
        display flex;
        // width 26rem;
        flex-flow: wrap;
    }
    .content > div{
        height: 10rem;
        width 45%;
    }
        // .area{
        //     height: 10rem;
        //     width: 13rem;
        //     // background-color black;
        // }
        // .industry{
        //     height: 10rem;
        //     width 13rem;
        //     // background-color: black;
        // }
</style>
